<template>
  <view class="merchant-container">
    <view class="payment-type-container">
      <view
        class="payment-type-item"
        :class="{
          'payment-type-active': fundCard.payment_type === '0'
        }"
        @click="fundCard.payment_type = '0';fundCard.card_no = ''">支付宝</view>
      <!-- <view
        class="payment-type-item"
        :class="{
          'payment-type-active': fundCard.payment_type === '1'
        }"
        @click="fundCard.payment_type = '1';fundCard.card_no = ''">银行卡</view> -->
    </view>
    <view class="form-container default-box-shadow">
      <u-form :model="fundCard" ref="uForm" label-width="180">
        <u-form-item label="收款姓名" prop="real_name">
          <u-input v-model="fundCard.real_name" placeholder="请输入收款真实姓名" />
        </u-form-item>
        <u-form-item v-if="fundCard.payment_type === '0'" label="支付宝账号" prop="card_no">
          <u-input v-model="fundCard.card_no" placeholder="请输入支付宝账号" />
        </u-form-item>
        <u-form-item v-if="fundCard.payment_type === '1'" label="银行卡号" prop="card_no">
          <u-input v-model="fundCard.card_no" placeholder="请输入银行卡号" />
        </u-form-item>
        <u-form-item label="身份证号" :border-bottom="false" prop="id_card">
          <u-input v-model="fundCard.id_card" placeholder="需与收款账号所属一致" />
        </u-form-item>
        <!-- <u-form-item label="默认收款账号" :border-bottom="false" prop="is_default">
          <u-radio-group v-model="fundCard.is_default" active-color="#56d39d">
            <u-radio name="1">是</u-radio>
            <u-radio name="0">否</u-radio>
          </u-radio-group>
        </u-form-item> -->
      </u-form>
    </view>
    <!-- 提示 -->
    <view class="tip">请如实填写您的账户信息，不然打款失败后果自负。</view>
    <view class="sumbit-button" @click="sumbitMerchantApply">立即保存</view>
  </view>
</template>

<script>
  import { createFundCard, fundCardInfoById } from '@/api/financialManagement';
  import Upload from '@/components/upload/upload';
  export default {
    components: {
      Upload
    },
    data() {
      return {
        fundCard: {
          id: '',
          real_name: null, // 真实姓名
          card_no: null, // 账号
          id_card: null, // 身份证号
          is_default: '1',
          payment_type: '0',
        },
        rules: {
          real_name: [
            { 
              required: true, 
              message: '请输入您的收款真实姓名', 
              trigger: ['change', 'blur'],
            }
          ],
          card_no: [
            { 
              required: true, 
              message: '请输入您的支付宝账号', 
              trigger: ['change', 'blur'],
            }
          ],
          id_card: [
            {
              required: true,
              message: '请输入您的身份证号，需与收款账号实名一致', 
              trigger: ['change', 'blur']
            }
          ]
        }
      }
    },
    onLoad(options) {
      if (options && options.id) {
        this.fundCard.id = options.id;
        this.fundCardInfoById(options.id);
      }
    },
    methods: {

      // 获取账号详情
      fundCardInfoById(id) {
        fundCardInfoById({ id }).then(result => {
          console.log(result)
          if (result && result.data) {
            let data = result.data;
            this.fundCard.id = data.id;
            this.fundCard.real_name = data.real_name;
            this.fundCard.card_no = data.card_no;
            this.fundCard.id_card = data.id_card;
            // this.fundCard.is_default = data.is_default;
            this.fundCard.payment_type = data.payment_type;
          }
        });
      },

      // 提交申请
      sumbitMerchantApply() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中...',
              mask: true
            })
            createFundCard(this.fundCard).then(result => {
              uni.hideLoading();
              if (result && result.code === 200) {
                uni.showToast({
                  title: '提交成功',
                  icon: 'success',
                  mask: true
                })
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1,
                    fail: () => {
                      uni.switchTab({ url: '/pages/mine/index' })
                    }
                  })
                }, 1000)
              }
            }).catch(() => {
              uni.hideLoading();
            })
          } else {
            console.log('验证失败');
          }
        });
      },

    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    }
  }
</script>

<style lang="scss">
  page{
    background-color: #f8f8f8;
  }

  .merchant-container{
    padding: 24rpx;

    .payment-type-container{
      width: 430rpx;
      height: 72rpx;
      background: #fff;
      border: 2rpx solid #dfdfdf;
      border-radius: 36rpx;
      margin: 0 auto 20rpx;
      overflow: hidden;
      position: relative;
      display: flex;

      .payment-type-item{
        flex: 1;
        text-align: center;
        line-height: 68rpx;
        font-size: 28rpx;
        border-radius: 34rpx;
        color: #333;
      }

      .payment-type-active{
        background-color: $uni-color-primary;
        color: #fff;
      }
    }

    .form-container{
      background-color: #fff;
      padding: 24rpx;
      .bind-title{
        font-size: 28rpx;
        text-align: center;
        color: #333;
        padding: 6rpx 0;
      }
      .bind-btn{
        background-color: $uni-color-primary;
        color: #fff;
      }
    }

    .tip{
      margin-top: 40rpx;
      font-size: 24rpx;
      color: #888;
    }

    .sumbit-button{
      background-color: $uni-color-primary;
      color: #ffff;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      margin-top: 40rpx;
    }

    .sumbit-button2{
      color: $uni-color-primary;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      font-size: 32rpx;
      margin-top: 40rpx;
    }

    .review-button{
      background: rgba($color: #888, $alpha: 0.6);
    }

    .success-button{
      background: rgba($color: #67c23a, $alpha: 0.6);
    }
  }
</style>
